<template>
	<view class="container">
		<!-- 头部导航（保留原结构，可根据需求补充） -->

		<!-- 主体内容 -->
		<view class="content">

			<!-- 订单商品信息 -->
			<view class="order-item" v-for="(item,index) in orderServicesList" :key="index">
				<view class="uni-flex uni-justify-between uni-align-center top">
					<view class="uni-flex uni-align-center">
						<!-- 响应式数据：cardData 从 setup 中导出 -->
						<text class="text1">{{ item.name }}</text>
						<!-- <text class="text2">{{ cardData.orderTypeName }}</text> -->
					</view>
					<!-- 条件渲染逻辑保持不变 -->
					<text class="text3"
						v-if="['订单完成', '订单关闭', '待评价', '订单取消', '退款/售后'].includes(cardData.orderStatusName)">
						{{ cardData.orderStatusName }}
					</text>
					<text class="text4" v-else-if="['待服务', '服务中'].includes(cardData.orderStatusName)">
						{{ cardData.orderStatusName }}
					</text>
					<text class="text5" v-else-if="cardData.orderStatusName === '待付款'">
						{{ cardData.orderStatusName }}
					</text>
				</view>

				<view class="uni-flex order-content">
					<image :src="item.img" mode="aspectFill"></image>
					<view class="uni-flex-column info">
						<text class="title">{{ item.name }}</text>
						<text class="des">{{ item.des }}</text>
						<text class="num">x {{ item.count }}</text>
					</view>
					<text class="price">¥{{ item.priceAmount }}</text>
				</view>

				<view class="uni-flex total">
					<text class="text1">实付款</text>
					<text class="text2">¥{{ item.paymentAmount }}</text>
				</view>

				<!-- 插槽保持不变 -->
				<slot name="bottom"></slot>


			</view>

			<!-- 订单详情列表 -->
			<view class="order-details">
				<view class="detail-item">
					<text class="detail-label">订单编号</text>
					<text class="detail-value">{{cardData?.id}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">下单时间</text>
					<text class="detail-value">{{cardData?.createOrderTime}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">付款时间</text>
					<text class="detail-value">{{cardData?.reason}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">付款方式</text>
					<text class="detail-value">{{cardData?.payMethodName}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">实付金额</text>
					<text class="detail-value-Amount">￥{{cardData?.paymentAmount}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<!-- Vue3 组合式 API 核心：<script setup> 语法糖 -->
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		orderDetail
	} from '@/api/consumerOrder.js';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const refundId = ref(''); // 存储接收的退款单ID
	const orderServicesList = ref([])
	onLoad((option) => {
		// option 包含所有传递的参数，refundId 对应拼接的参数名
		refundId.value = option.refundId || '';
		console.log('接收的退款单ID：', refundId.value);
		getorderDetail()
	});

	const cardData = ref([]);

	const getorderDetail = async () => {
		const res = await orderDetail(refundId.value)
		console.log('res', res);
		if (res.code === 200) {
			cardData.value = res.data
			orderServicesList.value = res.data.orderServices
			console.log('orderServicesList.value', orderServicesList.value);
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式部分完全不变，直接保留原 SCSS 代码 */
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	}

	.content {
		padding: 20rpx;

		.order-item {
			background: #ffffff;
			border-radius: 20rpx;
			padding: 31rpx 25rpx;
			margin-bottom: 30rpx;

			.top {
				.text1 {
					font-size: 34rpx;
					color: #333333;
					display: inline-block;
					max-width: 300rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.text2 {
					font-weight: 400;
					font-size: 24rpx;
					color: #2f80ed;
					background: #e5f0ff;
					border-radius: 4px;
					padding: 2rpx 9rpx;
					margin-left: 14rpx;
				}

				.text3 {
					font-weight: 500;
					font-size: 34rpx;
					color: #999999;
				}

				.text4 {
					font-weight: 500;
					font-size: 34rpx;
					color: #2F80ED;
				}

				.text5 {
					font-weight: 500;
					font-size: 34rpx;
					color: #FF6A47;
				}
			}

			.order-content {
				margin-top: 30rpx;

				image {
					width: 137rpx;
					height: 137rpx;
					border-radius: 10rpx;
				}

				.info {
					flex: 1;
					margin-left: 24rpx;

					.title {
						font-weight: 500;
						font-size: 34rpx;
						color: #333333;
						max-width: 300rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.des {
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin-top: 5rpx;
						max-width: 350rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.num {
						font-size: 28rpx;
						color: #666666;
						margin-top: 12rpx;
					}
				}

				.price {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
				}
			}

			.total {
				margin-top: 20rpx;
				justify-content: flex-end;
				align-items: center;

				.text1 {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					margin-right: 10rpx;
				}

				.text2 {
					font-weight: 500;
					font-size: 34rpx;
					color: #333333;
				}
			}

			.button-box {
				text-align: right;
				margin-top: 20rpx;

				.button2 {
					background: #2F80ED;
					border-radius: 28rpx;
					color: #fff;
					padding: 15rpx 30rpx;
					font-size: 24rpx;

				}
			}
		}
	}

	.order-details {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.detail-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15rpx 0;
			// border-bottom: 1px solid #f0f0f0;

			// &:last-child {
			// 	border-bottom: none;
			// }

			.detail-label {
				font-size: 30rpx;
				color: #666;
			}

			.detail-value {
				font-size: 30rpx;
				color: #666;
			}
			.detail-value-Amount{
				color: #FF6A47;
				font-weight: 500;
				font-size: 30rpx;
			}
		}
	}
</style>